<template>
  <div>
    <h1>{{message}}</h1><button @click="changeMsg">change</button>
    <div>{{ reverMessage }}</div>
    <div>{{ reverMessage }}</div>
    <div>{{ reverMessage }}</div>
    <div>{{ reverMessage }}</div>
    <div>{{ reverMessage }}</div>
  </div>
</template>

<script>
export default {
  computed: {
    reverMessage() {
      console.log("--------------------------");
      return this.message.split("").reverse().join("");
    },
  },
  methods:{
    changeMsg(){
     this.message="Hello Giles" 
    }
  },
  data() {
    return {
      message: "Hello World",
    };
  },
};
</script>

<style>
</style>